<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>HTML5 音乐播放器</title>
		<meta name="viewport" content="width=device-width user-scalable=no"/>
		
		<!-- Add to homescreen for Safari on Ios -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-title" content="Todo">
		<link rel="apple-touch-icon" href="img/logo.png">
	
		<!-- Add to homescreen for Chrome on Android -->
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="application-name" content="Todo">
		<meta name="theme-color" content="#2F3BA2">
		<link rel="icon" sizes="192x192" href="img/logo.png">
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<script src="js/jquery.js"></script>
		<script src="js/index.js"></script>
	</head>
	<body>
		
		<div class="beijing">
			
			<div id="top">
				<div class="lf iconfont">&#xe654;</div>
				<div class="title"></div>
				<div class="rg iconfont">&#xe61c;
					<div class="weituo">						
					</div>
					<div class="hei-tou"></div>
					<div class="vivo">	
					
						<ul class="caidan">
							<li class="caidan-lis">
								<img src="img/31.png" alt="" />
								<span>加到歌单</span>
							</li>
							<li class="caidan-lis">
								<img src="img/32.png" alt="" />
								<span>下载</span>
							</li>
							<li class="caidan-lis">
								<img src="img/33.png" alt="" />
								<span>分享</span>
							</li>
							<li class="caidan-lis">
								<img src="img/34.png" alt="" />
								<span>删除</span>
							</li>
						</ul>
						<ul class="caidan">
							<li class="caidan-lis">
								<img src="img/35.png" alt="" />
								<span>查看歌手</span>
							</li>
							<li class="caidan-lis">
								<img src="img/36.png" alt="" />
								<span>查看专辑</span>
							</li>
							<li class="caidan-lis">
								<img src="img/37.png" alt="" />
								<span>相似单曲</span>
							</li>
							<li class="caidan-lis">
								<img src="img/38.png" alt="" />
								<span>播放MV</span>
							</li>
						</ul>
						<div class="void">
							<img class="laba" src="img/40.png"/>
							<div class="volume">
								<div class="ylt">
									<div class="hei"></div>
									<div class="y-yuan"></div>
								</div>
							</div>
							<img class="hengping" src="img/39.png"/>
						</div>
						<div class="quxiao">
							关闭
						</div>
					</div>
				</div>
			</div>
			
			<div id="big-box">
				<div class="left-box link">
					<ul class="xiangxi">
						<li>
							<span class="geshou">
								<img src=""/>
							</span>
							<div class="right-box">
								<span>歌名：</span>
								<span class="name-shu"></span>			
							</div>	
						</li>
						<li>
							
							<div class="right-box">

								<span>歌手：</span>
								<span class="author-shu"></span>
							</div>			
						</li>
					</ul>
				</div>
				
				<div class="ct-box link chuxian">
					<div class="author">
						-- 陈奕迅  --
					</div>
					
					<div class="zhuan">
						<img class="img" src=""/>
					</div>
					
					<div class="word">
						<div class="ct">
							<!--<span>怦然心动歌曲的歌词</span>-->
						</div>
					</div>				
				</div>	
				
				<ul class="rightb-box link">
				</ul>
			</div>
			
			
			
			<div class="anniu">
				<div class="anniu-ct">
					<div class="div"><span class=""></span></div>
					<div class="div"><span class="action"></span></div>
					<div class="div"><span class='geciye'></span></div>
				</div>
			</div>
			
			
			
			
			
			<audio id="audio" src="music/Imagine Dragons - On Top of the World.mp3" loop></audio>
			<div class="bottom">
				<div class="bt-lis iconfont love">&#xe629;</div>
				
				<div class="bt-lis iconfont">&#xe601;</div>
				
				<div class="bt-lis-caidan iconfont">&#xe7ba;</div>
			</div>
			<div class="all-radio">
				<div class="current-time">00:00</div>
				<div class="pragress">
					<div class="jdt">
						<div class="yuan"></div>
						<div class="green"></div>
					</div>
				</div>
				<div class="duration">05:49</div>
			</div>
			<div class="bofang">
				<div class="bofang-ct">
					<div class="shang iconfont">&#xe600;</div>
					<div class="play iconfont">&#xe63e;</div>
					<div class="xia iconfont">&#xe602;</div>
				</div>
			</div>			
			<div id="zhezhao">
			
			</div>
			
			<div class="gequ-lis">
				<div class="toubu">
					<div class="bof-lis">
						<div class="tubiao iconfont">&#xe603;</div>
						<div class="word-lis">循环播放</div>
						<span class="all-nub">(4首)</span>
					</div>
					<div class="xuan-tub">
						<div class="lis-tubiao iconfont">&#xe601;</div>
						<div class="lis-tubiao iconfont  tianjiab">&#xe748;</div>
						<div class="lis-tubiao iconfont">&#xe618;</div>
					</div>
				</div>
				<ul class="many-ge">
					<li class="ge-lins">
						<div class="name">
							<span class="ge-name"></span>
							<span class="ge-author"></span>
						</div>
						
						<div class="caozuo">
							<span class="like iconfont">&#xe63f;</span>
							<span class="del iconfont">&#xe62c;</span>
						</div>
					</li>
				</ul>
				<div class="close">
					关闭
				</div>
			</div>
			
			
			<div class="song-list">
				<div class="mulu">
					<div class="quanxuan">
						全选
					</div>
					<div class="all2">
						可选定5首
					</div>
					<div class="guanbi">
						关闭
					</div>
				</div>
				<div class="add">
					<span class="iconfont">&#xe748;</span>
					<span>添加到歌单</span>
				</div>
			</div>
				
			
		</div>
		
	</body>
</html>
